<template>
    <d2-container>
        <!-- 搜索表头 -->
        <template slot="header">
            <el-form :inline="true" :model="searchForm" ref="searchForm" size="small" v-if="showHeader" class="searchHeader">

                <el-form-item label="请求方式" prop="way">
                    <ec-dict-select v-model="searchForm.way" placeholder="请求方式" dictType="request_way">
                    </ec-dict-select>
                </el-form-item>
                <el-form-item label="请求地址" prop="url">
                    <el-input v-model="searchForm.url" placeholder="请输入请求地址" clearable />
                </el-form-item>

                <el-form-item label="方法名" prop="method_name">
                    <el-input v-model="searchForm.method_name" placeholder="请输入方法名" clearable />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="getDataTable">
                        <d2-icon name="search" />
                        查询
                    </el-button>
                    <el-button @click="handleFormReset">
                        <d2-icon name="refresh" />
                        重置
                    </el-button>
                </el-form-item>

            </el-form>
        </template>

        <!-- 表格表头 -->
        <div class="table-header">
            <div>
                <!-- <el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="addOrUpdate()">添加
                </el-button> -->
                <!-- <el-button type="primary" icon="el-icon-search" size="small">搜索</el-button> -->
                <!-- <el-button type="primary" icon="el-icon-search" size="small">搜索</el-button> -->
            </div>
            <div>
                <el-button size="small" round icon="el-icon-refresh" @click="getDataTable()"></el-button>
                <el-button size="small" round icon="el-icon-share"></el-button>
                <el-button size="small" round icon="el-icon-search" @click="changeHeader()"></el-button>
            </div>
        </div>


        <!-- 表格表体 -->
        <ec-table :data="tabledata" v-loading="loading" @selection-change="handleSelectionChange">
            <el-table-column prop="ip" header-align="center" align="center" show-overflow-tooltip label="ip">
            </el-table-column>
            <el-table-column prop="url" header-align="center" align="center" show-overflow-tooltip label="请求地址">
            </el-table-column>
            <el-table-column prop="type" header-align="center" align="center" show-overflow-tooltip label="请求类型">
            </el-table-column>
            <el-table-column prop="way" header-align="center" align="center" show-overflow-tooltip label="请求方式">
            </el-table-column>
            <el-table-column prop="classPath" header-align="center" align="center" show-overflow-tooltip label="执行类路径">
            </el-table-column>
            <el-table-column prop="methodName" header-align="center" align="center" show-overflow-tooltip label="请求方法名">
            </el-table-column>
            <el-table-column prop="param" header-align="center" align="center" show-overflow-tooltip label="请求参数">
            </el-table-column>
            <el-table-column prop="operation" header-align="center" align="center" show-overflow-tooltip label="操作类型">
            </el-table-column>
            <el-table-column prop="sessionId" header-align="center" align="center" show-overflow-tooltip
                label="session标识">
            </el-table-column>
            <el-table-column prop="startTime" header-align="center" align="center" show-overflow-tooltip label="请求开始时间">
            </el-table-column>
            <el-table-column prop="finishTime" header-align="center" align="center" show-overflow-tooltip
                label="请求结束时间">
            </el-table-column>
            <el-table-column prop="returnTime" header-align="center" align="center" show-overflow-tooltip
                label="请求返回时间">
            </el-table-column>
            <el-table-column prop="returnData" header-align="center" align="center" show-overflow-tooltip
                label="接口返回数据">
            </el-table-column>
        </ec-table>

        <!-- 表格表尾 -->
        <template slot="footer">
            <!-- <el-button type="primary" size="mini" :loading="uploading" style="float:left;">
                <d2-icon name="cloud-upload" />
                Upload log data
            </el-button> -->

            <ec-pagination :page="page" @size-change="handleSizeChange" @current-change="handleCurrentChange">
            </ec-pagination>
        </template>
    </d2-container>
</template>

<script>
    import * as requestlogService from '@/api/log/requestlog'

    export default {
        name:"system-log-request",
        data() {
            return {
                searchForm: {
                    way: '',
                    rul: '',
                    method_class: '',
                },
                page: {
                    page: 1,
                    limit: 10,
                    total: 0
                },
                showHeader: true,
                tabledata: [],
                multipleSelection: [],
                loading: false,
            }
        },
        mounted() {
            this.getDataTable()
        },
        methods: {
            // 获取数据列表
            getDataTable() {
                this.loading = true
                let query = {
                    page: this.page.page,
                    limit: this.page.limit,
                    way: this.searchForm.way,
                    url: this.searchForm.url,
                    method_class: this.searchForm.method_class
                };
                requestlogService.getrequestlogpage(query).then(data => {
                    this.tabledata = data.list;
                    this.page.total = data.totalCount;
                    this.loading = false;
                }).catch((res) => {
                    this.loading = false;
                });
            },
            //切换页数
            handleSizeChange(val) {
                this.page.limit = val;
                this.getDataTable();
            },
            // 翻页
            handleCurrentChange(val) {
                this.page.page = val;
                this.getDataTable();
            },
            // 切换显示搜索表头
            changeHeader() {
                this.showHeader = !this.showHeader
            },
            // 重置搜索表单
            handleFormReset() {
                this.$refs.searchForm.resetFields()
            },
            // 新增 / 修改
            addOrUpdate(id) {
                this.addOrUpdateVisible = true
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(id)
                })
            },
            managerHandle(id) {

            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 删除
            deleteHandle(id) {
                if (id) {
                    this.$confirm("确认删除？", "确认信息", {
                        distinguishCancelAndClose: true,
                        confirmButtonText: "删除",
                        cancelButtonText: "取消"
                    }).then(() => {
                        requestlogService.delrequestlog(id).then(() => {
                            this.getDataTable();
                        });
                    });
                }
            }
        }
    }
</script>